<template>
  <div class="viewContain">
    <div class="all">
      <div class="left">
        <el-form :model="listQuery" size="small" label-width="60px" label-position="right">
          <el-row>
            <el-col :xs="{ span: 24 }" :sm="{ span: 8 }" :md="{ span: 8 }" :xl="{ span: 8 }">
              <el-form-item label="名称:">
                <el-input v-model="listQuery.codeDesc" clearable style="width:100%" @keyup.enter.native="handleSearch" />
              </el-form-item>
            </el-col>
            <el-col :xs="{ span: 24 }" :sm="{ span: 8 }" :md="{ span: 8 }" :xl="{ span: 8 }">
              <el-form-item label="编码:">
                <el-input v-model="listQuery.code" clearable style="width:100%" @keyup.enter.native="handleSearch" />
              </el-form-item>
            </el-col>
            <el-col :xs="{ span: 12 }" :sm="{ span: 4 }" :md="{ span: 4 }" :xl="{ span: 4 }">
              <el-form-item label-width="20px">
                <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
              </el-form-item>
            </el-col>
            <el-col :xs="{ span: 12 }" :sm="{ span: 4 }" :md="{ span: 4 }" :xl="{ span: 4 }">
              <el-form-item align="right">
                <el-button size="mini" type="primary" @click="handleAdd('par')">新增</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table
          ref="table"
          v-loading="loading"
          fit
          stripe
          :data="tableData"
          border
          size="mini"
          highlight-current-row
          :height="height"
          style="cursor: pointer"
          @current-change="handleCurrentChange"
        >
          <el-table-column align="center" label="序号" type="index" width="50">
            <template slot-scope="scope">
              <span>{{ (listQuery.pageNo - 1) * listQuery.pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="codeDesc" align="center" label="名称" width="150" />
          <el-table-column prop="code" align="center" label="编码" />
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button class="text-button" size="mini" @click.stop="handleDetail('par', scope.row)">详情</el-button>
              <el-button class="text-button" size="mini" @click.stop="handleEdit('par', scope.row)">修改</el-button>
              <el-button v-if="scope.row.canDel !== '0'" class="text-button el-button--danger" size="mini" @click.stop="handleDelete('par', scope.row.id)">可以删</el-button>
              <el-button v-if="scope.row.canDel === '0'" class="text-button el-button--danger" size="mini" disabled>不可删</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" :total-count="totalCount" @pagination="handleSearch" />
      </div>
      <div class="right">
        <el-form :model="listQuery" size="small" label-width="100px">
          <el-form-item>
            <div style="text-align:right">
              <el-button size="mini" type="primary" @click="handleAdd('chi')">新增</el-button>
            </div>
          </el-form-item>
        </el-form>
        <el-table
          ref="table"
          v-loading="loading_detail"
          fit
          stripe
          :data="tableData_detail"
          border
          size="mini"
          :height="height"
        >
          <el-table-column align="center" label="序号" type="index" width="50">
            <template slot-scope="scope">
              <span>{{ (listQuery.pageNo - 1) * listQuery.pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="codeDesc" align="center" label="名称" width="150" />
          <el-table-column prop="code" align="center" label="编码" width="150" />
          <el-table-column align="center" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button class="text-button" size="mini" @click.stop="handleDetail('chi', scope.row)">详情</el-button>
              <el-button class="text-button" size="mini" @click.stop="handleEdit('chi', scope.row)">修改</el-button>
              <el-button v-if="scope.row.canDel !== '0'" class="text-button el-button--danger" size="mini" @click.stop="handleDelete('chi', scope.row.id)">可以删</el-button>
              <el-button v-if="scope.row.canDel === '0'" class="text-button el-button--danger" size="mini" disabled>不可删</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page.sync="listQuery_detail.pageNo" :limit.sync="listQuery_detail.pageSize" :total-count="totalCount_detail" @pagination="handleSearchDetail" />
      </div>
    </div>
    <el-dialog :title="modalTitle" :visible.sync="showAddDictionaryInfo" :close-on-click-modal="false" width="600px">
      <el-form ref="addDictionaryForm" :model="addDictionaryForm" label-width="100px" size="small" :rules="addDictionaryFormRules">
        <el-form-item label="名称" style="width: 100%" prop="codeDesc">
          <el-input v-model="addDictionaryForm.codeDesc" :disabled="isDetail" />
        </el-form-item>
        <el-form-item label="编码" style="width: 100%" prop="code">
          <el-input v-model="addDictionaryForm.code" :disabled="isDetail" />
        </el-form-item>
        <el-form-item v-if="isShow" label="所在组" style="width: 100%" prop="code">
          <el-input v-model="addDictionaryForm.pCodeDesc" disabled />
        </el-form-item>
        <el-form-item label="是否可用" style="width: 100%">
          <template>
            <el-radio v-model="addDictionaryForm.status" label="1" :disabled="isDetail">可用</el-radio>
            <el-radio v-model="addDictionaryForm.status" label="0" :disabled="isDetail">不可用</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="是否可删" style="width: 100%">
          <template>
            <el-radio v-model="addDictionaryForm.canDel" label="1" :disabled="isDetail">可删</el-radio>
            <el-radio v-model="addDictionaryForm.canDel" label="0" :disabled="isDetail">不可删</el-radio>
          </template>
        </el-form-item>
      </el-form>
      <div v-if="!isDetail" slot="footer" class="dialog-footer" align="center">
        <el-button size="small" type="primary" plain @click.native="showAddDictionaryInfo = false">取消</el-button>
        <el-button type="primary" size="small" @click.native="addSubmit">确定</el-button>
      </div>
      <div v-else slot="footer" class="dialog-footer" align="center">
        <el-button size="small" type="primary" @click.native="showAddDictionaryInfo = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getPageDataList, insertDataInfo, updateDataInfoById, delDateById } from '@a/core/dataDictionary.js'
import pagination from '@c/pagination'
export default {
  components: { pagination },
  data() {
    return {
      loading: false,
      height: window.innerHeight - 370,
      loading_detail: false,
      listQuery: {
        code: '',
        codeDesc: '',
        pageNo: 1,
        pageSize: 10
      },
      listQuery_detail: {
        pageNo: 1,
        pageSize: 10
      },
      oCode: '',
      oPCodeDesc: '',
      totalCount: 0,
      totalCount_detail: 0,
      tableData: [],
      tableData_detail: [], // right
      addDictionaryFormRules: {
        codeDesc: {
          required: true,
          validator: (rule, value, callback) => {
            if (value == null || value.length === 0) {
              return callback(new Error('名称不能为空'))
            } else {
              callback()
            }
          },
          trigger: 'blur'// canDel(1-可删，0-不可)
        },
        code: {
          required: true,
          validator: (rule, value, callback) => {
            if (value == null || value.length === 0) {
              return callback(new Error('编码不能为空'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }
      },
      modalTitle: '字典新增',
      showAddDictionaryInfo: false,
      isDetail: false,
      isShow: false,
      addDictionaryForm: {
        codeDesc: '',
        code: '',
        status: '',
        canDel: '',
        parentCode: '',
        pCodeDesc: ''
      }
    }
  },
  created() {
    this.handleSearch()
  },
  methods: {
    // 查询
    handleSearch() {
      const para = Object.assign({
        parentCode: 0
      }, this.listQuery)
      this.loading = true
      getPageDataList(para).then(res => {
        this.loading = false
        if (res.data) {
          this.tableData = res.data.list
          this.totalCount = res.data.total
        }
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    handleSearchDetail() {
      const para = Object.assign({
        parentCode: this.oCode
      }, this.listQuery_detail)
      this.loading_detail = true
      getPageDataList(para).then(res => {
        this.loading_detail = false
        if (res.data) {
          this.tableData_detail = res.data.list
          this.totalCount_detail = res.data.total
        }
      }).catch(err => {
        this.loading_detail = false
        console.log(err)
      })
    },
    // 单选触发
    handleCurrentChange(row) {
      if (row) {
        this.oCode = row.code
        this.oPCodeDesc = row.codeDesc
        this.listQuery_detail = {
          pageNo: 1,
          pageSize: 10
        }
        this.handleSearchDetail()
      }
    },
    // 清空FORM表单
    resetForm(formName) {
      if (this.$refs[formName] === undefined) {
        return
      }
      this.$refs[formName].resetFields()
    },
    // 新增
    handleAdd(type) {
      if (type === 'chi') {
        if (!this.oPCodeDesc) {
          this.$message({
            message: '请先选择父级',
            type: 'warning'
          })
          return
        }
        this.isShow = true
      } else {
        this.isShow = false
      }
      this.modalTitle = '字典新增'
      this.isDetail = false
      this.resetForm('addDictionaryForm')
      this.addDictionaryForm = {
        codeDesc: '',
        code: '',
        status: '',
        canDel: '',
        parentCode: type === 'chi' ? this.oCode : '0',
        pCodeDesc: type === 'chi' ? this.oPCodeDesc : ''
      }
      this.showAddDictionaryInfo = true
    },
    // 新增+编辑-保存
    addSubmit() {
      this.$refs.addDictionaryForm.validate(valida => {
        if (valida) {
          const para = Object.assign({}, this.addDictionaryForm)
          const id = this.addDictionaryForm.id
          if (id) {
            updateDataInfoById(para).then(res => {
              if (res.code === 0) {
                this.showAddDictionaryInfo = false
                if (this.addDictionaryForm.parentCode === '0') {
                  this.handleSearch()
                } else {
                  this.handleSearchDetail()
                }
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error'
                })
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            insertDataInfo(para).then(res => {
              if (res.code === 0) {
                this.showAddDictionaryInfo = false
                if (this.addDictionaryForm.parentCode === '0') {
                  this.handleSearch()
                } else {
                  this.handleSearchDetail()
                }
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error'
                })
              }
            }).catch(err => {
              console.log(err)
            })
          }
        }
      })
    },
    // 详情
    handleDetail(type, row) {
      this.addDictionaryForm = row
      if (type === 'chi') {
        this.isShow = true
        this.addDictionaryForm.pCodeDesc = this.oPCodeDesc
        this.addDictionaryForm.parentCode = this.oCode
      } else {
        this.isShow = false
      }
      this.modalTitle = '字典详情'
      this.isDetail = true
      this.showAddDictionaryInfo = true
    },
    // 修改
    handleEdit(type, row) {
      this.addDictionaryForm = row
      if (type === 'chi') {
        this.isShow = true
        this.addDictionaryForm.pCodeDesc = this.oPCodeDesc
      } else {
        this.isShow = false
      }
      this.modalTitle = '字典修改'
      this.isDetail = false
      this.showAddDictionaryInfo = true
    },
    // 删除
    handleDelete(type, id) {
      this.$confirm('确认要删除吗?', '提示', {}).then(() => {
        delDateById(id).then(res => {
          if (res.code === 0) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            if (type === 'chi') {
              this.handleSearchDetail()
            } else {
              this.handleSearch()
              this.handleSearchDetail()
            }
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        }).catch(err => {
          console.log(err)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.all {
  width: 100%;
  .left {
    width: 49%;
    // border: 1px solid #ccc;
    margin-right: 2%;
    float: left;
  }
  .right {
    width: 49%;
    // border: 1px solid #ccc;
    float: left;
  }
}
</style>
